<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>day07_demo05</title>
<script>
	//onload是页面加载事件,在网页加载完成时,自动触发,
	//触发时调用对应的函数
	window.onload=function(){
		//读写节点
		//1.如何读取节点的名称的类型
		var p1=document.getElementById("p1");
		console.log(p1.nodeName);
		console.log(p1.nodeType);
		//2.读写节点的内容
		//<p>内容</p>,<span>内容</span>
		//任何双标签中间的文本就是内容
		//(1)innerHTML:(带标签)
		var p2=document.getElementById("p2");
		console.log(p2.innerHTML);
		p2.innerHTML="2.DOM提供了<u>查询</u>节点的方法";
		
		//(2)innerText(不能带标签)
		var p3=document.getElementById("p3");
		console.log(p3.innerText);
		p3.innerText="3.DOM提供了<u>增删</u>节点的方法";
		
		//3.读写节点的值(除了label之外的表单控件都有值)
		//input,select,textarea
		//读: input.value
		//写: input.value=""
		
		//4.读写节点的属性
		//(1)通过方法读写属性
		var img1=document.getElementById("img1");
		console.log(img1.getAttribute("src"));
		
		img1.setAttribute("src","../images/02.jpg");
		
		img1.removeAttribute("src");
		//(2)通过属性名,读写几个属性	
		//id,style,className
		var a1=document.getElementById("a1");
		console.log(a1.style.color);
		a1.style.color="blue";
		console.log(a1.style.color);
		
	
	};

</script>

</head>
<body>
	<p id="p1">1.DOM提供了<b>读写</b>节点的方法</p>
	<p id="p2">2.DOM提供了<b>查询</b>节点的方法</p>
	<p id="p3">3.DOM提供了<b>增删</b>节点的方法</p>
	<p>
		<img src="../images/01.jpg" id="img1"/>
	</p>
	
	<p>
		<a href="#" id="a1" style="color:red;">测试</a>
	
	</p>
	
	
	
</body>
</html>